<template>
	<div class="content">
		<el-empty description="没有找到相关页面"></el-empty>
		<input type="text" v-model="name"><br>
		<input type="text" v-model="age"><br>
		姓名和年龄是{{ totle }}
		<button @click="test">修改totle</button>
		<hr>
		当前路由是：{{ $route.path }}
		<!-- <input type="text" v-model="price"><br>
		<input type="text" v-model="shop"><br>
		商品是：  {{firstname}} {{twoname}} -->
	</div>
</template>

<script setup lang="ts">
import { ref,computed,watch} from "vue";
import { useRouter } from 'vue-router';
const name=ref("张三")
const age=ref("www")

const totle=computed(()=>{ //只读
	return name.value+age.value
})

// const totle=computed({
	
// 	get(){
// 		return name.value+age.value
// 	},
// 	set(val){
// 		console.log(val)
// 		return totle.value=val
// 	}
	
// })

// const test=()=>{
// 	totle.value="wwwwwwwwwwwwww"
// }


const price =ref("20")
const shop =ref("电脑")
const commodity=ref('')
let firstname=ref("")
let twoname=ref("")

let router = useRouter()
watch(() => router,(newValue, oldValue) => {
    console.log(newValue);
},
{ immediate: true }
);
//在选项参数中指定 immediate: true 将立即以表达式的当前值触发回
// watch(shop,(newval,oldval)=>{
// 	return commodity.value=newval+price.value
// })

// watch([price,shop],(newval,oldval)=>{
// 	[firstname,twoname] =newval
// 	// return commodity.value=newval+price.value
// })



</script>

<style scoped>

</style>